<template>
	<view>
		<view class="fund-header">
			<view class="layout">				
				<view class="fund-header-backend" @click="handleBackendButton()">
					<image src="../../../static/icon/icon-back.png"></image>
				</view>
				<view class="fund-header-tooltip">
					份额认购
				</view>
				<view class="fund-header-more">
					<image src="../../../static/icon/icon-moer.png"></image>
				</view>
			</view>
		</view>
		<view class="product">
			<view class="layout">
				<view class="product-tooltip">{{fundData.prodName}}</view>
				<view class="product-button">产品详情</view>
			</view>
			<view class="product-company">{{fundData.companyName}}</view>
		</view>
		
		<view class="order">
			<view class="order-header">
				<view class="order-header-tooltip">买入金额</view>
				<view class="order-header-rules">交易规则</view>
			</view>
			<view class="order-from layout">
				<view class="order-from-suffix">￥</view>
				<view class="order-from-volume">
					<input v-model="orderForm.quantity" placeholder="10元起购" />					
				</view>
			</view>
			<view class="order-bottom">
				买入费率：0.00%
				<view>12月31日确认份额，1月1日可查看收益</view>
			</view>
		</view>
		
		<view class="payment">
			<view class="payment-header">支付方式</view>
			<view class="payment-main ">
				<radio-group v-model="orderForm.settmentmentID">
					
				<view class="payment-main-item layout">
					<view class="payment-main-item-icon">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="payment-main-item-text">
						<view>微信支付</view>
						<view class="payment-main-item-text-note">支持银行卡、零钱、零钱通</view>
					</view>
					<view class="payment-main-item-radio">
						<radio value="1"></radio>
					</view>
				</view>
				</radio-group>
			</view>
		</view>
		<view class="protocol">
			<view class="protocol-block">
				<view class="protocol-block-tooltip">服务协议与风险提示</view>
				<view class="protocol-block-button">
					<image src="../../../static/icon/icon-open.png"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-protocle">
				<checkbox></checkbox>
				<view>已悉知风险提示并同意服务协议，已知晓此产品为高中风险，为非保本浮动收益</view>
			</view>
			<view @click="handleFundSubmit()" class="bottom-button">买入</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fundData:{},
				orderForm:{
					settmentmentID:1002,
					quantity:0
				}
			}
		},
		onLoad(options) {
			this.fromType  = options.fromType
			console.log(options)
			this.productID = options.productID;
			this.refreshProductDetail();
		},
		methods: {
			refreshProductDetail:function(){
				this.$fund.getProductDetail({
					"productID":this.productID
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						this.fundData = res.data;
					}
				})
			},
			/**
			 * 刷新结算方式
			 */
			refreshSettlementList:function(){
				this.$fund.getProductDetail({
					"productID":this.productID
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
					}
				})
			},
			handleBackendButton:function(){
				let jumpUrl = "/pages/fund/main/main"
				if(this.fromType == "column"){
					jumpUrl = "/pages/fund/column/column"
				}
				console.log(this.fromType,jumpUrl)
				//return false;
				uni.redirectTo({
					url:jumpUrl
				})
			},
			handleFundSubmit:function(){
				let _this = this
				if(this.orderForm.quantity < 1){
					uni.showToast({
						title:"请填写需要认购的份额",
						icon:"none"
					})
				}else{					
					this.$fund.saveOrder(
					{
						productID:this.productID,
						settmentmentID:this.orderForm.settmentmentID,
						quantity:this.orderForm.quantity
					}
					).then(res=>{
						console.log(res)
						if(res.code == 200){
							
							uni.showToast({
								title:"下单成功",
								icon:"none"
							})
							let payData = {
								"provider":"-",
								"orderInfo":res.data
							}
							if(_this.orderForm.settmentmentID == 1001){
								//微信支付
								payData["provider"] = "wxpay";
							}
							if(_this.orderForm.settmentmentID == 1002){
								//支付宝支付
								payData["provider"] = "alipay";
							}
							
							if(payData["provider"] == "-"){
								uni.showToast({
									title:"支付方式不支持",
									icon:"none"
								})								
							}
							else{
								uni.requestPayment({
									provider:payData.provider,
									orderInfo:payData.orderInfo,
									success:function(res){
										console.log("支付信息",res)
										uni.showToast({
										  title:'支付成功',
										  'icon':'none'
										})
										uni.redirectTo({
											url:"/pages/home/fund/fund"
										})
									},
									fail:function(res){
										console.log("支付失败",res)
										uni.showToast({
										  title:'支付失败',
										  'icon':'none'
										})
										uni.redirectTo({
											url:"/pages/home/fund/fund"
										})
									}
								})
							}
						}else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}
					});
				}
			}
		}
	}
</script>

<style>
page { background: #ededed; }
page { padding-top: 70rpx; padding-bottom: 120rpx; background: #ededed; font-size: 14px; }
.fund-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.fund-header { background: #fff; padding: 15rpx; }

.fund-header-backend { width: 50rpx; height: 40rpx; }
.fund-header-tooltip { width: 600rpx; text-align: center; }
.fund-header-more { width: 50rpx; height: 40rpx; }

.product { background: #fff; padding:15rpx 25rpx; }
.product-tooltip { width: 600rpx; font-size: 18px; font-weight: bold; }
.product-button { width: 150rpx; text-align: center; font-size: 14px;}
.product-company { font-size:12px; padding-top: 15rpx; border-bottom: #ededed 1px solid; padding-bottom: 15rpx; }

.order { background: #fff;  padding: 0 25rpx; }
.order-header { display: flex; padding-top: 25rpx; padding-bottom: 10rpx;}
.order-header-tooltip { width: 500rpx; text-align: left; font-size: 18px; font-weight: 800;}
.order-header-rules { width: 200rpx; text-align: right; font-size: 14px;}

.order-from { padding:20rpx 0; border-bottom: #ededed 1px solid; }
.order-from-suffix { font-size: 28px; font-weight: bold; text-align: left;}
uni-input { padding: 5rpx 10rpx; font-size: 24px; color: #666; font-weight: bold; width: 680rpx;}

.order-bottom { padding: 10rpx 15rpx 20rpx; font-size: 14px; border-bottom: #ededed 15rpx solid;}


.payment { background: #fff; padding: 0 25rpx; }
.payment-header { text-align: left; font-size: 18px; font-weight: 800; border-bottom: #ededed 1px solid; padding-bottom: 15rpx; }
.payment-main-item { padding: 15rpx 0; border-bottom: #ededed 1px solid; }
.payment-main-item-icon { width: 30rpx; height: 30rpx; margin-top: 25rpx; }
.payment-main-item-text { width: 625rpx; padding-left: 25rpx; }
.payment-main-item-text { font-size:16px; }
.payment-main-item-text-note { font-size:12px; }
.payment-main-item-radio { width: 70rpx; padding-top:20rpx; }

.protocol {  background: #fff; padding:0 25rpx; padding-top: 50rpx; padding-bottom: 100rpx;}
.protocol-block { display: flex; border-bottom: #ededed 1px solid; padding-bottom: 15rpx; justify-content: space-between; }
.protocol-block-tooltip {}
.protocol-block-button { width: 30rpx; height: 30rpx; padding-top: 10rpx; }

.bottom { position: fixed; left: 0; bottom: 0; right: 0; background: #fff; }
.bottom-protocle { display: flex; padding: 15rpx; font-size: 14px; }
.bottom-button { padding: 25rpx 0; background: #c60; color: #fff; text-align: center; }
</style>
